<template>
	<!-- 账单 -->
	<view class="bigbox">
		<!-- 筛选盒子 -->
		<view class="flex col-center row-between pt20">
			<text class="flex1 tit">钱包明细</text>
			<lauwen-select :options="options" :defaultIndex="'1'" :height="31" :padding="15" :fontSize="'24rpx'"
				@getValue="getValue"></lauwen-select>
		</view>
		<!-- 筛选盒子 -->
		<u-empty text="暂无数据" marginTop="100" v-if="!billList.length"></u-empty>
		<view class="mt26 boxr pl22 pr22">
			<view class="bannerboxList flex row-between h146 pr40 pb30 pl30 pt36"  v-for="(item,index) in billList" :key="index">
				<view class="boxList-r flex1 flex row-column row-between">
					<!-- 右边上面的盒子 -->
					<view class="boxList-r-t  flex row-between">
						<text class="boxList-r-id">{{item.remark}}</text>
						<view class="boxList-r-m">
							<text class="boxListNum">{{item.account}}</text>
						</view>
					</view>
					<!-- 右边下面的盒子 -->
					<view class="boxList-r-b flex row-between">
						<text class="boxList-s">{{item.createtime}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import lauwenSelect from "@/components/lauwen-select/lauwenSelect.vue"
	export default {
		components: {
			lauwenSelect
		},
		data() {
			return {
				value1: '',
				options: {
					'1': "七天内",
					'2': "15天内",
					'3': "30天内",
				},
				type:1,
				page:1,
				size:20,
				billList:[]
			};
		},
		onShow() {
			this.bill()
		},
		onReachBottom() {
			this.page ++ 
			this.bill()
		},
		methods:{
			bill(){
				let data = {
					type:this.type,
					page: 1,
					size: this.page * 10,
				}
				this.$api.bill(data).then(res => {
					this.billList = res.data;
				})
			},
			getValue(e){
				this.type = e
				this.bill()
			}
		}
	}
</script>

<style lang="scss">
	.tit {
		font-size: 30rpx;
		color: #0C162E;
	}
	.bannerboxList {
		border-bottom: 2rpx solid #D2DEEB;
		;

		.boxList-l {
			.avatar {
				border-radius: 50%;
			}
		}

		.boxList-r {
			.boxList-r-t {
				.boxList-r-id {
					font-size: 26rpx;
					color: #0C162E;
				}

				.boxList-r-m {

					text,
					.boxListNum {
						font-size: 24rpx;
						font-weight: 500;
						color: #6D788B;
					}

					.boxListNum {
						color: #FF2E6D;
					}
				}
			}

			.boxList-r-b {
				.boxList-s {
					font-size: 24rpx;
					font-weight: 500;
					color: #6D788B;
				}
			}
		}
	}

	.bannerboxList:last-child {
		border-bottom: none;
	}
</style>
